v-calendar

What is v-calendar?

v-calendar is a versatile and customizable calendar component for Vue.js applications. It allows developers to easily integrate date pickers, date ranges, and event calendars into their projects.

What are v-calendar's main functionalities?

Date Picker

The date picker allows users to select a single date. The selected date is bound to the `selectedDate` data property.

<template>
  <v-date-picker v-model="selectedDate"></v-date-picker>
</template>

<script>
export default {
  data() {
    return {
      selectedDate: null
    };
  }
};
</script>

Date Range Picker

The date range picker allows users to select a range of dates. The selected range is bound to the `dateRange` data property, which contains `start` and `end` dates.

<template>
  <v-date-picker v-model="dateRange" is-range></v-date-picker>
</template>

<script>
export default {
  data() {
    return {
      dateRange: { start: null, end: null }
    };
  }
};
</script>

Event Calendar

The event calendar allows users to display events on specific dates. The `events` data property contains an array of event objects, each with a `key`, `highlight` style, and `dates`.

<template>
  <v-calendar :attributes="events"></v-calendar>
</template>

<script>
export default {
  data() {
    return {
      events: [
        { key: 'today', highlight: { backgroundColor: '#ff8080' }, dates: new Date() },
        { key: 'event1', highlight: { backgroundColor: '#80ff80' }, dates: new Date(new Date().setDate(new Date().getDate() + 1)) }
      ]
    };
  }
};
</script>

Other packages similar to v-calendar

vue-cal

vue-cal is a flexible calendar component for Vue.js that supports multiple views (month, week, day) and event management. It offers more built-in views compared to v-calendar but may require more configuration for custom styling.

vue2-datepicker

vue2-datepicker is a lightweight date picker component for Vue.js. It focuses on simplicity and ease of use, making it a good choice for projects that need a straightforward date picker without the additional features of v-calendar.

vue-fullcalendar

vue-fullcalendar is a wrapper for the FullCalendar library, providing a powerful and feature-rich calendar component for Vue.js. It offers extensive customization and event management capabilities, making it suitable for complex calendar applications.

README

VCalendar Plugin for Vue 3

A calendar and date picker plugin for Vue.js.

Vue.js 3.2+, Popper.js 2.0+ are required.

Install Plugin

NPM

npm install v-calendar@next @popperjs/core

Yarn

yarn add v-calendar@next @popperjs/core

Use Plugin

:warning: As of v3.0.0-alpha.7, all installation methods require manual import of component styles. This is due to Vite build restrictions in libary mode.

import 'v-calendar/style.css';

Method 1: Use Globally

import VCalendar from 'v-calendar';
import 'v-calendar/style.css';

// Use plugin with optional defaults
app.use(VCalendar, {})

<!-- MyComponent.vue -->
<template>
  <VCalendar />
  <VDatePicker v-model="date" />
</template>

Method 2: Use Components Globally

// main.js
import { setupCalendar, Calendar, DatePicker } from 'v-calendar';
import 'v-calendar/style.css';

// Use plugin defaults (optional)
app.use(setupCalendar, {})

// Use the components
app.component('VCalendar', Calendar)
app.component('VDatePicker', DatePicker)

<!-- MyComponent.vue -->
<template>
  <VCalendar />
  <VDatePicker v-model="date" />
</template>

Method 3: Use Components As Needed

// main.js
import { setupCalendar } from 'v-calendar';

// Use calendar defaults (optional)
app.use(setupCalendar, {})

<!-- MyComponent.vue -->
<template>
  <Calendar />
  <DatePicker v-model="date">
</template>

<script>
import { Calendar, DatePicker } from 'v-calendar';
import 'v-calendar/style.css';

export default {
  components: {
    Calendar,
    DatePicker,
  },
  data() {
    return {
      date: new Date(),
    };
  },
}
</script>

Source setup

Please follow below mentioned steps to clone and build this project:

Clone the repo

git clone https://github.com/nathanreyes/v-calendar

# Move to directory
cd v-calendar

Install dependencies

yarn

Build library

# Types, ES, ESM, CommonJS, IIFE
yarn build

Lint and fix files

yarn lint

Test library

# Types, ES, ESM, CommonJS, IIFE
yarn test